import React from 'react';
import { Select, DatePicker, Table } from 'antd';
import Axios from 'axios';
import { apiPrefix } from 'shared/api';
import './index.less';

const { Option } = Select;

const columns = [
  {
    title: '序号',
    dataIndex: 'id',
    render: (text, recode, index) => index + 1
  },
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '员工编号',
    dataIndex: '',
    key: '',
  },
  {
    title: '上个月所在工程',
    dataIndex: '',
    key: '',
  },
  {
    title: '本月所在工程',
    dataIndex: '',
    key: '',
  },
  {
    title: '在岗情况',
    dataIndex: '',
    key: '',
  },
];

class OnJob extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      queryMessage: {},
      peopleStats: [],
      show: false,
      waring: false,
    };
  }
  handlOnChange=(value, key) => {
    const { queryMessage } = this.state;
    queryMessage[key] = value;
    this.setState({ queryMessage: { ...this.state.queryMessage } });
    console.log(queryMessage);
  }
  query=() => {
    const api = `${apiPrefix}wdy_wage/api/v1/wage/stats`;
    const { queryMessage } = this.state;
    if (queryMessage.date_str === '' || queryMessage.date_str === undefined) {
      this.setState({ waring: true });
    } else {
      this.setState({ waring: false });

      Axios.post(api, this.state.queryMessage)
        .then((response) => {
          this.setState({ peopleStats: response.data, show: true });
        });
    }
  }
  render() {
    const { peopleStats, show, waring } = this.state;
    console.log(show);
    console.log(peopleStats);
    return (
      <div className="content">
        <div>
          <h3>人员在岗情况</h3>
          <section style={{ padding: 20, }}>
            <span style={{ marginLeft: 40 }}> 项目部</span>
            <Select
              style={{ width: 200, marginLeft: 20 }}
              showSearch
              className="select"
              placeholder="请选择岗位状态"
              onChange={value => this.handlOnChange(value, 'state')}
              optionFilterProp="children"
              filterOption={(input, option) =>
              option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
              }
            >
              <Option value="1" key="1">新增</Option>
              <Option value="2" key="2">离职</Option>
              <Option value="3" key="3">变动</Option>
            </Select>
            <span style={{ marginLeft: 40 }}>时间</span>
            <DatePicker
              placeholder="时间"
              style={{ marginLeft: 20, width: 200 }}
              onChange={(date, dateString) => this.handlOnChange(dateString, 'date_str')}
            />
            <span className="waring">{waring && '*时间必须选'}</span>
            <button className="queryButton" onClick={this.query}>查询</button>
          </section>
          {show &&
          <div style={{
            backgroundColor: '#00a65a',
            borderRadius: 3,
            margin: '20px 10px',
            padding: '15px 30px',
            borderLeft: '5px solid #00733e',
            color: '#fff',
          }}
          >
            <span>新增：{peopleStats.join}人、</span>
            <span>离开：{peopleStats.leave}人、</span>
            <span>变动：{peopleStats.changed}人。</span>
          </div>
          }
          <Table
            rowKey="id"
            columns={columns}
            dataSource={[]}
          />
        </div>
      </div>
    );
  }
}

export default OnJob;
